<template>
  <carousel />
  <br />
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>任务中心</span>
      </div>
    </template>
    <div
      v-for="(item, index) in tasklist"
      :key="index"
      class="text item"
      @click="jump"
    >
      {{ item.title }}
      <el-button
        size="small"
        style="float: right"
        type="primary"
        @click="jump(item.pid)"
        >去完成</el-button
      >
    </div>
  </el-card>
  <br />
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>试卷中心</span>
      </div>
    </template>
    <div
      v-for="(item, index) in paperlist"
      :key="index"
      class="text item"
      @click="jump"
    >
      {{ item.name }}
      <el-button
        size="small"
        style="float: right"
        type="primary"
        @click="jump(item.pid)"
        >去答题</el-button
      >
    </div>
  </el-card>
</template>

<script setup>
import router from '@/router'
import { getpaperlists } from '@/api/paper'
import { reactive, ref } from 'vue'
import carousel from './carousel'
//  获取任务列表
import { taskcenterlist } from '@/api/task'
const tasklist = ref([])
const gettask = async () => {
  const res = await taskcenterlist()
  let temp = res.data.data
  for (let i = 0; i < temp.length; i++) {
    let tid = 3
    if (temp[i].paperItems) {
      tid = temp[i].paperItems[0].examPaperAnswerId
    }
    tasklist.value.push({
      title: temp[i].title,
      pid: tid // 用于跳转
    })
  }
}
//  获取试卷列表
const paperlist = ref([])
const getpaper = async () => {
  const queryForm = ref({
    pageIndex: 1,
    pageSize: 5
  })
  const res = await getpaperlists(queryForm.value)
  let temp = res.data.data.list
  console.log(temp)
  for (let i = 0; i < temp.length; i++) {
    paperlist.value.push({
      name: temp[i].name,
      pid: temp[i].id // 用于跳转
    })
  }
}
const init = () => {
  gettask()
  getpaper()
}
const jump = (id) => {
  router.push({ name: 'sanswer', params: { id: id } })
}
init()
</script>

<style lang="scss" scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 100%;
}
</style>
